/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import './variables.less';

//lg: 24px;
//md: 16px;
//sm: 12px;
//xs: 8px;
//xss: 4px;

@padding-xl: 44px;

// Margin

.m-0 {
  margin: 0 !important;
}

.m-xss {
  margin: @margin-xss;
}

.m-xs {
  margin: @margin-xs;
}

.m-sm {
  margin: @margin-sm;
}

.m-lg {
  margin: @margin-lg;
}

.m-md {
  margin: @margin-md;
}

.m-box {
  margin: @margin-mlg;
}

.m-x-box {
  margin-right: @margin-mlg;
  margin-left: @margin-mlg;
}

.m-b-box {
  margin-bottom: @margin-mlg;
}

.m-t-box {
  margin-top: @margin-mlg;
}

.m-x-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.m-x-xs {
  margin-right: @margin-xs;
  margin-left: @margin-xs;
}

.m-x-xss {
  margin-right: @margin-xss;
  margin-left: @margin-xss;
}

.m-x-sm {
  margin-right: @margin-sm;
  margin-left: @margin-sm;
}

.m-x-lg {
  margin-right: @margin-lg;
  margin-left: @margin-lg;
}

.m-x-md {
  margin-right: @margin-md;
  margin-left: @margin-md;
}

.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-y-2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.m-y-xs {
  margin-top: @margin-xs;
  margin-bottom: @margin-xs;
}

.m-y-xss {
  margin-top: @margin-xss;
  margin-bottom: @margin-xss;
}

.m-y-sm {
  margin-top: @margin-sm;
  margin-bottom: @margin-sm;
}

.m-y-md {
  margin-top: @margin-md;
  margin-bottom: @margin-md;
}

.m-y-lg {
  margin-top: @margin-lg;
  margin-bottom: @margin-lg;
}

.m-y-mlg {
  margin-top: @margin-mlg;
  margin-bottom: @margin-mlg;
}

.m-y-xlg {
  margin-top: @margin-xlg;
  margin-bottom: @margin-xlg;
}

.m--r-7 {
  margin-right: -28px;
}

.m--x-sm {
  margin-left: -@margin-sm;
  margin-right: -@margin-sm;
}

.m--x-6 {
  margin-left: -1.5rem /* -24px */;
  margin-right: -1.5rem /* -24px */;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-r-xss {
  margin-right: @margin-xss;
}

.m-r-xs {
  margin-right: @margin-xs;
}

.m-r-sm {
  margin-right: @margin-sm;
}

.m-r-md {
  margin-right: @margin-md;
}

.m-r-lg {
  margin-right: @margin-lg;
}

.m--l-md {
  margin-left: -@margin-md;
}

.m-l-3\.5 {
  margin-left: 0.875rem;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-l-2 {
  margin-left: 2px;
}

.m-l-xs {
  margin-left: @margin-xs;
}

.m-l-xss {
  margin-left: @margin-xss;
}

.m-l-sm {
  margin-left: @margin-sm;
}

.m-l-md {
  margin-left: @margin-md;
}

.m-l-lg {
  margin-left: @margin-lg;
}

.m-l-xlg {
  margin-left: @margin-xlg;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-t-xs {
  margin-top: @margin-xs;
}

.m-t-xss {
  margin-top: @margin-xss;
}

.m--t-xss {
  margin-top: -@margin-xss;
}

.m--t-sm {
  margin-top: -@margin-sm;
}

.m--t-md {
  margin-top: -@margin-md;
}

.m-t-sm {
  margin-top: @margin-sm;
}

.m-t-md {
  margin-top: @margin-md;
}

.m-t-lg {
  margin-top: @margin-lg;
}

.m-t-xlg {
  margin-top: @margin-xlg;
}

.mt--1 {
  margin-top: -1rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-44 {
  margin-top: 11rem /* 176px */;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-b-xs {
  margin-bottom: @margin-xs;
}

.m-b-xss {
  margin-bottom: @margin-xss;
}

.m-b-sm {
  margin-bottom: @margin-sm;
}

.m-b-md {
  margin-bottom: @margin-md;
}

.m-b-lg {
  margin-bottom: @margin-lg;
}

.m-b-xlg {
  margin-bottom: @margin-xlg;
}

.mb-11 {
  margin-bottom: 2.75rem /* 44px */;
}

.mb-16 {
  margin-bottom: 4rem /* 64px */;
}

.m-auto {
  margin: auto;
}

.m-l-auto {
  margin-left: auto;
}

.m-r-auto {
  margin-right: auto;
}

.m-x-auto {
  margin-right: auto;
  margin-left: auto;
}

.m-y-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.m-l-7 {
  margin-left: 7.5rem;
}

.m-r-7 {
  margin-right: 7.5rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-0-important {
  margin-top: 0 !important;
}

.mt-2px {
  margin-top: 2px;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem /* 20px */;
}

.mb-7 {
  margin-bottom: 28px;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.m-8 {
  margin: 2rem;
}

.m-16 {
  margin: 4rem;
}

.mt-2\.5 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mb-9 {
  margin-bottom: 2.25rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-48 {
  margin-top: 12rem;
}

.mt-52 {
  margin-top: 13rem;
}

.m-52 {
  margin: 13rem;
}

.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-7 {
  margin-top: 1.75rem /* 28px */;
  margin-bottom: 1.75rem /* 28px */;
}

// padding
.p-16 {
  padding: 4rem;
}

.p-8 {
  padding: 2rem /* 32px */;
}

.pl-0 {
  padding-left: 0px;
}

.pl-8 {
  padding-left: 2rem;
}

.pt-8 {
  padding-top: 2rem;
}

.padding-r-l-l {
  padding: 0 @padding-lg;
}

.p-0 {
  padding: 0 !important;
}

.p-xs {
  padding: @padding-xs !important;
}

.p-xss {
  padding: @padding-xss;
}

.p-sm {
  padding: @padding-sm;
}

.p-md {
  padding: @padding-md;
}

.p-lg {
  padding: @padding-lg;
}

.p-box {
  padding: 20px;
}

.p-x-box {
  padding-right: 20px;
  padding-left: 20px;
}

.p-y-box {
  padding-top: 20px;
  padding-bottom: 20px;
}

.p-t-box {
  padding-top: 20px;
}

.p-b-box {
  padding-bottom: 20px;
}

.p-x-xss {
  padding-right: @padding-xss;
  padding-left: @padding-xss;
}

.p-x-xs {
  padding-right: @padding-xs;
  padding-left: @padding-xs;
}

.p-x-sm {
  padding-right: @padding-sm;
  padding-left: @padding-sm;
}

.p-x-md {
  padding-right: @padding-md;
  padding-left: @padding-md;
}

.p-x-lg {
  padding-right: @padding-lg;
  padding-left: @padding-lg;
}

.p-y-xs {
  padding-top: @padding-xs;
  padding-bottom: @padding-xs;
}

.p-y-xss {
  padding-top: @padding-xss;
  padding-bottom: @padding-xss;
}

.p-y-sm {
  padding-top: @padding-sm;
  padding-bottom: @padding-sm;
}

.p-y-md {
  padding-top: @padding-md;
  padding-bottom: @padding-md;
}

.p-y-lg {
  padding-top: @padding-lg;
  padding-bottom: @padding-lg;
}

.p-y-0\.5 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.p-x-05 {
  padding-left: 2px;
  padding-right: 2px;
}

.py-24 {
  padding-top: 6rem /* 96px */;
  padding-bottom: 6rem /* 96px */;
}

.p-x-24 {
  padding-left: 6rem /* 96px */;
  padding-right: 6rem /* 96px */;
}

.p-x-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-r-xss {
  padding-right: @padding-xss;
}

.p-r-xs {
  padding-right: @padding-xs;
}

.p-r-sm {
  padding-right: @padding-sm;
}

.p-r-md {
  padding-right: @padding-md;
}

.p-r-lg {
  padding-right: @padding-lg;
}

.p-r-xl {
  padding-right: @size-xl;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-l-xs {
  padding-left: @padding-xs;
}

.p-l-xss {
  padding-left: @padding-xss;
}

.p-l-sm {
  padding-left: @padding-sm;
}

.p-l-md {
  padding-left: @padding-md;
}

.p-l-lg {
  padding-left: @padding-lg;
}

.p-l-xl {
  padding-left: @padding-xl;
}

.p-t-xl {
  padding-top: @padding-xl;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-t-xs {
  padding-top: @padding-xs;
}

.p-t-05 {
  padding-top: 2px;
}

.p-t-xss {
  padding-top: @padding-xss;
}

.p-t-sm {
  padding-top: @padding-sm;
}

.p-t-md {
  padding-top: @padding-md;
}

.p-t-lg {
  padding-top: @padding-lg;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-b-xs {
  padding-bottom: @padding-xs;
}

.p-b-xss {
  padding-bottom: @padding-xss;
}

.p-b-sm {
  padding-bottom: @padding-sm;
}

.p-b-md {
  padding-bottom: @padding-md;
}

.p-b-lg {
  padding-bottom: @padding-lg;
}

.px-4 {
  padding-left: @padding-md;
  padding-right: @padding-md;
}

.py-2 {
  padding-top: @padding-xs;
  padding-bottom: @padding-xs;
}

.p-mlg {
  padding: @padding-mlg;
}

.take-to-right {
  position: absolute;
  right: 15px;
}

.w-80 {
  width: 80%;
}

.px-1\.5 {
  padding-left: 0.375rem /* 6px */;
  padding-right: 0.375rem /* 6px */;
}

.px-8 {
  padding-left: 2rem /* 32px */;
  padding-right: 2rem /* 32px */;
}

.px-10 {
  padding-left: 2.5rem;
  /* 40px */
  padding-right: 2.5rem;
}

.p-y-36 {
  padding-top: 9rem /* 144px */;
  padding-bottom: 9rem /* 144px */;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.m--ml-1 {
  margin-left: -0.25rem;
  /* -4px */
}

.m--ml-0\.5 {
  margin-left: -0.125rem;
  /* -2px */
}

.col-gap-md {
  column-gap: 1rem;
}

// Box sizing

.border-box {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}
